<!--
 * @Descripttion: 
 * @version: 
 * @Author: yuanliutech
 * @Date: 2022-11-30 09:27:36
 * @LastEditors: yuanliutech@lwj
 * @LastEditTime: 2025-03-07 17:29:50
-->
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "App",
  components: {},
  data() {
    return {
      isRouterAlive: true,
    };
  },
  provide() {
    //提供
    return {
      reload: this.reload,
    };
  },
  created() {
    this.environmentJudge();
  },
  methods: {
    ...mapMutations(["saveEnvironment"]),
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    // 环境判断
    environmentJudge() {
      if (process.env.NODE_ENV == "development") {
        this.saveEnvironment("development");
      } else if (process.env.NODE_ENV == "test") {
        this.saveEnvironment("test");
      } else if (process.env.NODE_ENV == "production") {
        this.saveEnvironment("production");
      } else {
        return;
      }
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  box-sizing: border-box;
  /* height: 100vh !important; */
  /* overflow: hidden; */
}

// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}

// 弹出框
::v-deep .el-message-box {
  background: transparent;
  border: 1px solid @primaryBgcolor;
}

::v-deep .el-message-box__header {
  background: @primaryBgcolor !important;
}

::v-deep .el-message-box__content {
  background: @primaryBgcolor !important;
}

::v-deep .el-message-box__btns {
  background: @primaryBgcolor !important;
  //  border-radius: 6px 6px 0 0;
}

// 修改二级菜单最小长度
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 155px !important;
}

// 多行文本框
.el-textarea__inner {
  font-family: "微软雅黑";
}

// --------------------------------------全局输入框placeholder颜色----------------------------------------------
.el-input__inner::placeholder {
  color: @primaryThemeTxtColor3 !important;
}

/* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
  color: @primaryThemeTxtColor3 !important;
}

/* 火狐 */
.el-input__inner:-moz-placeholder {
  color: @primaryThemeTxtColor3 !important;
}

/*ie*/
.el-input__inner:-ms-input-placeholder {
  color: @primaryThemeTxtColor3 !important;
}

.el-textarea__inner::placeholder {
  color: @primaryThemeTxtColor3 !important;
}

/* 谷歌 */
.el-textarea__inner::-webkit-input-placeholder {
  color: @primaryThemeTxtColor3 !important;
}

/* 火狐 */
.el-textarea__inner:-moz-placeholder {
  color: @primaryThemeTxtColor3 !important;
}

/*ie*/
.el-textarea__inner:-ms-input-placeholder {
  color: @primaryThemeTxtColor3 !important;
}

// 下拉框选中字体颜色
.el-select-dropdown__item.selected {
  color: #7367f0 !important;
}

// 删除框确定按钮
.el-message-box__btns .el-button--primary {
  border-color: #7367f0 !important;
  background-color: #7367f0 !important;
}

// el-select下拉框悬浮
.el-select .el-input__inner:hover {
  // border-color: #3B4253 !important;
  // border-color: none !important;
}

// el-select下拉框点击时
.el-select .el-input__inner:focus {
  border-color: #7367f0 !important;
}

// 设置elementUI的el-dialog上下左右居中
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

// 改变popover 弹出框颜色
.popover.el-popover {
  background: @primaryBgcolor6;
  border-color: @primaryBgcolor6;
  border-radius: 10px;
  color: @primaryThemeTxtColor2;

  .popper__arrow::after {
    border-bottom-color: @primaryBgcolor6 !important;
  }
}

.popover.el-popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: @primaryBgcolor6;
}

.popover.el-popper[x-placement^="top"] .popper__arrow {
  border-top-color: @primaryBgcolor6;
}

.popover.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: @primaryBgcolor6;
}

.popover.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: @primaryBgcolor6;
}

// 改变popover 弹出框颜色结束

// 表头设置
.biaotou_headr {
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  position: relative;

  .biaotou_headr_i {
    position: absolute;
    top: 17px;
    right: 10px;
    cursor: pointer;
  }
}

.biaotou_div {
  position: absolute;
  top: 47px;
  right: 15px;
  width: 220px;
  height: 400px;
  z-index: 999;
  background-color: @primaryBgcolor10;
  border-radius: 4px;
  box-shadow: 0 2px 20px @primaryBgcolor10;
  color: @primaryThemeTxtColor2;
}

.biaotou_neiron {
  font-size: 14px;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // cursor: pointer;
}

// .biaotou_neiron:hover {
//   background-color: #f7f7f7;
// }
// 表头设置结束

// 删除弹窗框
.el-message-box {
  background-color: @primaryBgcolor !important;
  border: none !important;
}

.el-message-box__header .el-message-box__title {
  color: @primaryThemeTxtColor2 !important;
}

.el-message-box__content {
  color: @primaryThemeTxtColor2 !important;
}

// 删除弹窗框结束
// 下拉框多选 选中样式
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  // background-color: transparent !important;
  font-weight: 700;
  background-color: @primarydropdownItemBgHover !important;
  color: #acabc1 !important;
}

// 所有选择框下拉框的背景色
.el-cascader__dropdown {
  border: none !important;
}

.popper__arrow {
  border-bottom-color: @primarydropdownMenuBgcolor !important;
  border-top-color: transparent !important;
}

.el-cascader-menu {
  border-right: 1px solid @primaryBorderColor !important;
  color: @primaryThemeTxtColor !important;

  .el-cascader-menu__list {
    background: @primarydropdownMenuBgcolor !important;
  }

  .el-cascader-node:hover {
    background-color: @primarydropdownItemBgHover !important;
    color: @primaryThemeTxtColor2;
  }

  .el-cascader-node.hover,
  .el-cascader-node:hover {
    background-color: @primarydropdownItemBgHover !important;
    color: @primaryThemeTxtColor2;
  }
}

.el-select-dropdown {
  background: @primarydropdownMenuBgcolor !important;
  border: none !important;

  .el-select-dropdown__item {
    color: @primaryThemeTxtColor !important;
  }

  // 下拉框选中样式
  .el-select-dropdown__item.selected {
    font-weight: 700;
    background-color: @primarydropdownItemBgHover !important;
    color: #acabc1 !important;
  }

  .el-select-dropdown__item:hover {
    // background-color: @primarydropdownItemBgHover !important;
    background-color: #7367f0 !important;
    color: #fff !important;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    // background-color: @primarydropdownItemBgHover !important;
    background-color: #7367f0 !important;
    color: #fff !important;
  }

  .el-select-dropdown__item.selected:hover {
    // background-color: @primarydropdownItemBgHover !important;
    background-color: #7367f0 !important;
    color: #fff !important;
  }
}

// 注释 lc 2025-2-21
// .popper__arrow::after {
//   top: -1px !important;
//   margin-left: -8px !important;
//   border-bottom-color: @primarydropdownMenuBgcolor !important;
// }
.el-popper .popper__arrow::after {
  border-top-width: 0 !important;
  border-right-width: 8px !important;
  border-bottom-width: 8px !important;
  border-left-width: 8px !important;
  top: 0 !important;
  margin-left: -8px !important;
}

.el-select-dropdown__item {
  font-size: 13px;
}

// 确定按钮
.confirm-button {
  background: @comfirmButton !important;
  border: 1px solid @comfirmButton !important;
  color: @comfirmButtonTxt !important;

  &:hover {
    color: @comfirmButtonTxtHover !important;
    background: @comfirmButtonHover !important;
    border: 1px solid @comfirmButtonHover !important;
  }
}

// 取消按钮
.cancel-button {
  background: @cancelButton !important;
  border: 1px solid @cancelButton !important;
  color: @cancelButtonTxt !important;

  &:hover {
    color: @cancelButtonTxtHover !important;
    background: @cancelButtonHover !important;
    border: 1px solid @cancelButtonHover !important;
  }
}

// 下拉菜单样式
.el-dropdown-menu {
  background: @primarydropdownMenuBgcolor !important;
  border: none !important;
  // #3a3e54
}

.popper__arrow::after {
  border-bottom-color: @primarydropdownMenuBgcolor !important;
}

.el-dropdown-menu__item:hover {
  background-color: transparent !important;
  /* 修改鼠标移入时的背景色 */
}

.el-dropdown-menu__item {
  color: @primaryThemeTxtColor !important;

  &:hover {
    // opacity: 0.8;
    background: @primarydropdownItemBgHover !important;
  }
}

// 禁填输入框
.el-input.is-disabled .el-input__inner {
  background-color: @primaryBanInputBg !important;
  color: #858585 !important;
}

// 日期选择框
.el-picker-panel {
  background: @primarydropdownMenuBgcolor !important;
  border: none !important;
  color: @ruleHeaderTitle !important;
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: @datePickerBgColor !important;
}

.el-popper.el-picker-panel .el-date-range-picker__content .el-date-table td.next-month,
.el-popper.el-picker-panel .el-date-range-picker__content .el-date-table td.prev-month,
.el-popper.el-picker-panel .el-picker-panel__body-wrapper .el-date-table td.next-month,
.el-popper.el-picker-panel .el-picker-panel__body-wrapper .el-date-table td.prev-month {
  color: @datePickerBanTextColor !important;
}

.el-picker-panel__icon-btn {
  color: @ruleHeaderTitle !important;
}

.el-date-table td.disabled div {
  background-color: @primarydropdownMenuBgcolor !important;
  color: @datePickerBanTextColor !important;
}

.el-date-table th {
  color: @ruleHeaderTitle !important;
  // border-bottom: 1px solid @datePickerThBorderBottom !important;
  border-bottom: 1px solid @ruleDeviceColor !important;
}

.el-popper.el-picker-panel .el-date-range-picker__content.is-left,
.el-popper.el-picker-panel .el-picker-panel__body-wrapper.is-left {
  border-right: 1px solid @ruleDeviceColor !important;
}

.date-style {
  border: 1px solid @primaryBorderColor2 !important;

  .el-time-panel__footer {
    border-top: 1px solid @primaryBorderColor;
    background: @primarydropdownMenuBgcolor;

    .el-time-panel__btn.confirm {
      color: @comfirmButton;
    }

    .el-time-panel__btn {
      color: @primaryScrollTxt;
    }
  }

  .el-time-panel__content {
    background: @primarydropdownMenuBgcolor;

    .el-time-spinner__item {
      color: @primaryThemeTxtColor3;
    }

    .active {
      color: @comfirmButton !important;
    }

    &::before {
      content: "";
      top: 50%;
      position: absolute;
      margin-top: -15px;
      height: 32px;
      z-index: 0;
      left: 0;
      right: 0;
      box-sizing: border-box;
      padding-top: 6px;
      text-align: left;
      border-top: 1px solid @primaryBorderColor2;
      border-bottom: 1px solid @primaryBorderColor2;
    }
  }

  .el-time-spinner__item:hover:not(.disabled):not(.active) {
    background: @primarydropdownItemBgHover;
    cursor: pointer;
  }
}

// 省市区
.el-cascader-menu .el-cascader-node.hover,
.el-cascader-menu .el-cascader-node:hover {
  color: @primaryThemeTxtColor3 !important;
}

.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: #7367f0 !important;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #7367f0 !important;
  background: #7367f0 !important;
}

// 省市区结束

.fc-loading {
  .el-loading-mask {
    background-color: rgba(10, 21, 67, 0.5) !important;
    border-radius: 4px;
  }
}
</style>
